<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1固定定位技巧</title>
    <style>
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: red;
            left: 20px;
        }
        .right{
            background-color: #00f;
            right: 20px;
        }
        .top{
            background-color: lightgreen;
            color: green;
            font-size: 30px;
            height: 120px;
            position: fixed;
            width: 100%;
            top: 0;
        }
        .main{
            margin-top: 130px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左边的广告条</div>
<div class="right">我是右边的广告条</div>
<div>
    <div class="main">啦啦啦啦啦啦啦啦啦啦啦啦啦啦Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda atque autem beatae cupiditate expedita
        laborum minima necessitatibus neque numquam, omnis pariatur quam quos repellat saepe sapiente suscipit vel
        vitae!
    </div>
    <div>Architecto asperiores, autem commodi delectus ducimus expedita, fuga fugiat ipsam iste odio pariatur porro quas
        quos repellendus sequi sunt voluptatum. Dolorem doloribus ea harum iure, laudantium natus perspiciatis quidem
        sed.
    </div>
    <div>Architecto consectetur deleniti dolores doloribus expedita labore magni modi neque nobis, non nulla optio
        provident quam quisquam reiciendis rerum similique? Corporis, dicta dolor expedita incidunt laudantium nostrum
        recusandae sunt vero.
    </div>
    <div>Aliquam animi corporis eveniet fugiat id illum ipsa minus nisi, officia omnis pariatur, quasi quis repellat,
        sequi vel. Consequuntur deserunt dolor dolore enim eum illo inventore nobis, quas quidem suscipit.
    </div>
    <div>Ab at eum in iste obcaecati! Architecto assumenda cumque cupiditate, debitis doloribus eos ex explicabo ipsa
        ipsum itaque maiores nobis pariatur porro quae tenetur, ullam vero? Ex molestias nihil tenetur?
    </div>
    <div>Ab amet aperiam aut consectetur cupiditate doloremque ducimus ea, enim ipsum iure laudantium magnam magni
        maiores minima officiis placeat praesentium quaerat quidem repudiandae sapiente, sint sit sunt, vero voluptas
        voluptate?
    </div>
    <div>Adipisci alias aliquid amet consequatur ea facere facilis ipsam necessitatibus placeat provident quas, quis
        soluta voluptas. Aperiam aut dolores facilis inventore ipsum laudantium minima mollitia necessitatibus officia
        voluptatem. Nisi, vero.
    </div>
    <div>Aperiam expedita, praesentium! Accusamus adipisci deserunt minima nesciunt nihil. A adipisci alias amet aut
        culpa delectus earum ex fuga hic incidunt iste laboriosam, molestiae odit quam tempora vel veniam veritatis.
    </div>
    <div>Aspernatur assumenda commodi error hic, in maxime, nihil pariatur placeat possimus provident, qui quisquam quo
        sint? Autem blanditiis, cumque dolorum exercitationem facere inventore necessitatibus nesciunt, quia quod
        repellat unde vero?
    </div>
    <div>Accusantium ad culpa delectus dignissimos, dolorem eos error eveniet expedita fuga in incidunt minus natus
        necessitatibus nostrum obcaecati officia perferendis praesentium quia similique, sit tempora unde veritatis
        voluptas. Fugiat, hic!
    </div>
    <div>Aliquid distinctio dolorem iste iure labore nam, possimus quos, recusandae rem sed soluta tempore tenetur
        totam! Adipisci architecto at culpa cupiditate, distinctio, dolore, fugiat ipsa libero recusandae repellendus
        suscipit tempore.
    </div>
    <div>Architecto autem deserunt doloribus dolorum ducimus eaque eos esse eveniet in incidunt maxime modi, porro
        recusandae rem, repellat rerum saepe, soluta veritatis vero voluptatibus? Adipisci aliquid atque illo laudantium
        sit?
    </div>
    <div>Aliquid assumenda at cum dicta dignissimos dolorem doloribus, illum impedit obcaecati omnis? Accusamus animi
        asperiores doloremque enim est expedita illo, minus nam odit quae quas quasi quod saepe sequi tempora.
    </div>
    <div>Alias autem cumque delectus dicta dolorem earum exercitationem explicabo ipsum labore magni maiores nam, nemo
        nihil nobis, nulla quas quasi quod quos recusandae reiciendis repellendus sunt suscipit temporibus unde
        voluptates.
    </div>
    <div>Aliquid beatae dolore explicabo magnam mollitia nihil nobis nulla possimus quaerat sed? Consectetur corporis
        debitis dolorem facere fugit id laborum nemo nesciunt nisi odit officia reprehenderit tempora, tenetur, vero
        voluptatibus!
    </div>
    <div>Culpa cumque deserunt eum expedita fugiat, fugit ipsam rem totam ut voluptate. Consectetur cum cumque eius,
        eligendi expedita fugiat, hic id libero, magnam perferendis quo sint sit veritatis vero vitae!
    </div>
    <div>Animi asperiores doloremque dolorum ducimus explicabo inventore ipsa ipsum iste, iure laborum maxime minima
        molestias mollitia nulla numquam obcaecati placeat provident quae quam, rem repellendus saepe suscipit totam
        veritatis voluptatem?
    </div>
    <div>Accusamus ad eius, eos fugit laborum libero natus nobis porro quas quo repudiandae sapiente soluta sunt unde
        vel veritatis voluptate voluptatem? Accusantium, aperiam commodi dolor doloribus error eveniet non odio.
    </div>
    <div>Accusantium cumque expedita laboriosam laborum omnis temporibus, voluptate? Dignissimos, dolorem dolorum facere
        facilis fugiat itaque maxime nemo nihil nobis officiis porro quas, quos tempore ut, vero. Aperiam explicabo
        fugit repellendus?
    </div>
    <div>Architecto dolores, id incidunt itaque maxime quam sequi tempore ullam. Aliquam eum iste possimus recusandae
        similique velit voluptatem. Dicta fugiat perferendis repellat tempora voluptatum. Adipisci asperiores
        consequuntur maiores repudiandae ut?
    </div>
    <div>Aliquid commodi doloremque dolores et excepturi explicabo fugiat hic ipsa iste laborum minima modi odio officia
        perspiciatis placeat quam qui quia quo quod ratione saepe, similique, sint ullam ut veniam.
    </div>
    <div>A atque aut autem dolor dolorum eligendi esse est, facilis harum illum inventore laborum mollitia nam
        necessitatibus non officiis optio perspiciatis possimus quo ratione reprehenderit rerum similique temporibus
        tenetur voluptatibus?
    </div>
    <div>Expedita harum, molestias porro provident quisquam quo. Adipisci cum cupiditate debitis deleniti dignissimos
        eligendi enim eos facere incidunt, ipsa, nostrum officia placeat quisquam quod repudiandae voluptate voluptatum?
        Distinctio, dolores, laborum.
    </div>
    <div>Ad aliquam aliquid commodi dolore dolorem dolores ex fuga ipsum, laudantium, minus molestiae natus nesciunt
        nostrum placeat quo repudiandae sequi, temporibus ut voluptates voluptatibus. Amet cum eligendi enim magnam
        sunt.
    </div>
    <div>Ipsa maiores molestiae nobis officiis. Ab adipisci alias aliquid dignissimos dolores fugit hic laudantium
        maxime nam, perferendis porro provident quia sed suscipit tempora unde, voluptates. Amet consequatur
        consequuntur cum eos?
    </div>
    <div>Accusamus aperiam consectetur cum dicta dolor dolore, in odit reprehenderit. Commodi, dolorum est hic id illo
        in inventore libero magni maxime necessitatibus obcaecati, porro quasi recusandae repudiandae sequi sint
        suscipit.
    </div>
    <div>Alias at commodi delectus dicta harum iusto libero necessitatibus numquam saepe sint. Modi tempora unde ut.
        Beatae doloribus, ea expedita illo inventore ipsum itaque pariatur, recusandae sed sint soluta sunt.
    </div>
    <div>Minus obcaecati, voluptates. Ab amet asperiores consequatur cumque cupiditate enim facilis, fugit modi
        molestias nam reiciendis, repellat sit tempora vel voluptate. Consequuntur error excepturi, exercitationem
        mollitia quisquam totam. Obcaecati, odit.
    </div>
    <div>Accusantium architecto beatae commodi corporis cumque dicta eligendi est maxime minus nostrum possimus
        recusandae rerum sapiente sed, vel vero voluptas. Animi cum doloremque facilis, incidunt iure perferendis rem
        repudiandae tempore!
    </div>
    <div>Assumenda commodi dolor dolorum laboriosam non quasi reiciendis. Accusantium ad ea expedita fugit harum illum
        in mollitia vero voluptatem? Amet aspernatur atque, cupiditate fugit iste laboriosam mollitia odio quas ratione.
    </div>
</div>
</body>
</html>